<template>
  <div class="articles" :class="{ mobile: isMobile }">
    <!-- 非首页列表头 -->
    <div class="article-list-header">
      <list-header />
    </div>
    <div class="article-list">
      <placeholder :data="articles.length" :loading="!articles.length && fetching">
        <template #default>
          <transition-group key="list" name="module" mode="out-in" tag="div">
            <article-item
              v-for="articleItem in articles"
              :key="articleItem.id"
              :article="articleItem"
            ></article-item>
          </transition-group>
        </template>
        <template #loading>
          <ul class="article-list-skeleton" key="skeleton">
            <li v-for="item in 9" :key="item" class="item">
              <div class="thumb">
                <skeleton-base />
              </div>
              <div class="content">
                <div class="title">
                  <skeleton-line />
                </div>
                <div class="description">
                  <skeleton-paragraph :lines="4" />
                </div>
              </div>
            </li>
          </ul>
        </template>
      </placeholder>
    </div>
    <!-- 加载更多 -->
    <div class="article-load">
      <button
        class="btn-loadmore"
        :disabled="fetching || !isCanLoadMore"
        @click="$emit('loadmore')"
      >
        <span v-if="!fetching && isCanLoadMore">加载更多</span>
        <span v-else-if="fetching && isCanLoadMore">加载中...</span>
        <span v-else-if="!isCanLoadMore">暂无更多</span>
      </button>
    </div>
  </div>
</template>

<script>
import { computed, defineComponent } from "vue";
import ListHeader from "./list-header.vue";
import articleItem from "./item.vue";
import SkeletonLine from "@/components/skeleton/line.vue";
import SkeletonBase from "@/components/skeleton/base.vue";
import SkeletonParagraph from "@/components/skeleton/paragraph.vue";
import { useEnhandle } from "@/enhandle";
export default defineComponent({
  name: "article-list",
  components: {
    ListHeader,
    articleItem,
    SkeletonLine,
    SkeletonBase,
    SkeletonParagraph,
  },
  props: {
    articles: {
      type: Array,
      default: () => [],
    },
    fetching: {
      type: Boolean,
      required: true,
    },
    pagination: {
      type: Object,
    },
  },
  setup(props) {
    const { store } = useEnhandle();
    const isMobile = computed(() => store.state.global.isMobile);
    const isCanLoadMore = computed(() => {
      const { page, total_page } = props.pagination;
      const hasArticles = props.pagination;
      return hasArticles ? page < total_page : false;
    });

    return {
      isMobile,
      isCanLoadMore,
    };
  },
});
</script>

<style lang="scss" scoped>
.articles {
  width: 100%;
  padding: $sm-gap;
  margin-bottom: $lg-gap;
  @include common-bg-module();
  @include radius-box($sm-radius);

  .article-list-header {
    padding-bottom: 15px;
    border-bottom: 1px solid #e9eaed;
  }

  .article-list {
    margin-bottom: $lg-gap;
    min-height: $lg-gap;
    overflow: hidden;

    .empty {
      height: $gap * 10;
      font-size: $font-size-h4;
      @include common-bg-module();
      @include radius-box($sm-radius);
    }
  }

  .article-list-skeleton {
    padding: 0;
    margin: 0;
    list-style: none;
    overflow: hidden;
    .item {
      display: flex;
      height: 10rem;
      padding: $sm-gap;
      margin-bottom: $lg-gap;
      &:last-child {
        margin-bottom: 0;
      }
      .thumb {
        height: 100%;
        width: 15rem;
      }
      .content {
        margin-left: $lg-gap;
        flex-grow: 1;
        .title {
          height: 1.4em;
          width: 36%;
        }
        .description {
          margin-top: $sm-gap;
        }
      }
    }
  }
  .article-load {
    margin-top: 20px;
    text-align: center;
    outline: none;
    .btn-loadmore {
      color: $text;
    }
  }
}
</style>
